/* *
 *
 *  Module for using patterns or images as point fills.
 *
 *  (c) 2010-2019 Highsoft AS
 *  Author: Torstein Hønsi, Øystein Moseng
 *
 *  License: www.highcharts.com/license
 *
 *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
 *
 * */
"use strict";
import H from "../parts/Globals.js";
/**
 * Pattern options
 *
 * @interface Highcharts.PatternOptionsObject
 */ /**
 * Background color for the pattern if a `path` is set (not images).
 * @name Highcharts.PatternOptionsObject#backgroundColor
 * @type {Highcharts.ColorString}
 */ /**
 * URL to an image to use as the pattern.
 * @name Highcharts.PatternOptionsObject#image
 * @type {string}
 */ /**
 * Width of the pattern. For images this is automatically set to the width of
 * the element bounding box if not supplied. For non-image patterns the default
 * is 32px. Note that automatic resizing of image patterns to fill a bounding
 * box dynamically is only supported for patterns with an automatically
 * calculated ID.
 * @name Highcharts.PatternOptionsObject#width
 * @type {number}
 */ /**
 * Analogous to pattern.width.
 * @name Highcharts.PatternOptionsObject#height
 * @type {number}
 */ /**
 * For automatically calculated width and height on images, it is possible to
 * set an aspect ratio. The image will be zoomed to fill the bounding box,
 * maintaining the aspect ratio defined.
 * @name Highcharts.PatternOptionsObject#aspectRatio
 * @type {number}
 */ /**
 * Horizontal offset of the pattern. Defaults to 0.
 * @name Highcharts.PatternOptionsObject#x
 * @type {number|undefined}
 */ /**
 * Vertical offset of the pattern. Defaults to 0.
 * @name Highcharts.PatternOptionsObject#y
 * @type {number|undefined}
 */ /**
 * Either an SVG path as string, or an object. As an object, supply the path
 * string in the `path.d` property. Other supported properties are standard SVG
 * attributes like `path.stroke` and `path.fill`. If a path is supplied for the
 * pattern, the `image` property is ignored.
 * @name Highcharts.PatternOptionsObject#path
 * @type {string|Highcharts.SVGAttributes}
 */ /**
 * Pattern color, used as default path stroke.
 * @name Highcharts.PatternOptionsObject#color
 * @type {Highcharts.ColorString}
 */ /**
 * Opacity of the pattern as a float value from 0 to 1.
 * @name Highcharts.PatternOptionsObject#opacity
 * @type {number}
 */ /**
 * ID to assign to the pattern. This is automatically computed if not added, and
 * identical patterns are reused. To refer to an existing pattern for a
 * Highcharts color, use `color: "url(#pattern-id)"`.
 * @name Highcharts.PatternOptionsObject#id
 * @type {string|undefined}
 */
/**
 * Holds a pattern definition.
 *
 * @sample highcharts/series/pattern-fill-area/
 *         Define a custom path pattern
 * @sample highcharts/series/pattern-fill-pie/
 *         Default patterns and a custom image pattern
 * @sample maps/demo/pattern-fill-map/
 *         Custom images on map
 *
 * @example
 * // Pattern used as a color option
 * color: {
 *     pattern: {
 *            path: {
 *                 d: 'M 3 3 L 8 3 L 8 8 Z',
 *                fill: '#102045'
 *            },
 *            width: 12,
 *            height: 12,
 *            color: '#907000',
 *            opacity: 0.5
 *     }
 * }
 *
 * @interface Highcharts.PatternObject
 */ /**
 * Pattern options
 * @name Highcharts.PatternObject#pattern
 * @type {Highcharts.PatternOptionsObject}
 */ /**
 * Animation options for the image pattern loading.
 * @name Highcharts.PatternObject#animation
 * @type {boolean|Highcharts.AnimationOptionsObject|undefined}
 */ /**
 * Optionally an index referencing which pattern to use. Highcharts adds
 * 10 default patterns to the `Highcharts.patterns` array. Additional
 * pattern definitions can be pushed to this array if desired. This option
 * is an index into this array.
 * @name Highcharts.PatternObject#patternIndex
 * @type {number|undefined}
 */
import U from "../parts/Utilities.js";
var animObject = U.animObject,
  erase = U.erase,
  pick = U.pick,
  wrap = U.wrap;
var addEvent = H.addEvent,
  merge = H.merge;
// Add the predefined patterns
H.patterns = (function () {
  var patterns = [],
    colors = H.getOptions().colors;
  [
    "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11",
    "M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9",
    "M 3 0 L 3 10 M 8 0 L 8 10",
    "M 0 3 L 10 3 M 0 8 L 10 8",
    "M 0 3 L 5 3 L 5 0 M 5 10 L 5 7 L 10 7",
    "M 3 3 L 8 3 L 8 8 L 3 8 Z",
    "M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0",
    "M 10 3 L 5 3 L 5 0 M 5 10 L 5 7 L 0 7",
    "M 2 5 L 5 2 L 8 5 L 5 8 Z",
    "M 0 0 L 5 10 L 10 0",
  ].forEach(function (pattern, i) {
    patterns.push({
      path: pattern,
      color: colors[i],
      width: 10,
      height: 10,
    });
  });
  return patterns;
})();
/**
 * Utility function to compute a hash value from an object. Modified Java
 * String.hashCode implementation in JS. Use the preSeed parameter to add an
 * additional seeding step.
 *
 * @private
 * @function hashFromObject
 *
 * @param {object} obj
 *        The javascript object to compute the hash from.
 *
 * @param {boolean} [preSeed=false]
 *        Add an optional preSeed stage.
 *
 * @return {string}
 *         The computed hash.
 */
function hashFromObject(obj, preSeed) {
  var str = JSON.stringify(obj),
    strLen = str.length || 0,
    hash = 0,
    i = 0,
    char,
    seedStep;
  if (preSeed) {
    seedStep = Math.max(Math.floor(strLen / 500), 1);
    for (var a = 0; a < strLen; a += seedStep) {
      hash += str.charCodeAt(a);
    }
    hash = hash & hash;
  }
  for (; i < strLen; ++i) {
    char = str.charCodeAt(i);
    hash = (hash << 5) - hash + char;
    hash = hash & hash;
  }
  return hash.toString(16).replace("-", "1");
}
/**
 * Set dimensions on pattern from point. This function will set internal
 * pattern._width/_height properties if width and height are not both already
 * set. We only do this on image patterns. The _width/_height properties are set
 * to the size of the bounding box of the point, optionally taking aspect ratio
 * into account. If only one of width or height are supplied as options, the
 * undefined option is calculated as above.
 *
 * @private
 * @function Highcharts.Point#calculatePatternDimensions
 *
 * @param {Highcharts.PatternOptionsObject} pattern
 *        The pattern to set dimensions on.
 *
 * @return {void}
 *
 * @requires modules/pattern-fill
 */
H.Point.prototype.calculatePatternDimensions = function (pattern) {
  if (pattern.width && pattern.height) {
    return;
  }
  var bBox =
      (this.graphic &&
        ((this.graphic.getBBox && this.graphic.getBBox(true)) ||
          (this.graphic.element && this.graphic.element.getBBox()))) ||
      {},
    shapeArgs = this.shapeArgs;
  // Prefer using shapeArgs, as it is animation agnostic
  if (shapeArgs) {
    bBox.width = shapeArgs.width || bBox.width;
    bBox.height = shapeArgs.height || bBox.height;
    bBox.x = shapeArgs.x || bBox.x;
    bBox.y = shapeArgs.y || bBox.y;
  }
  // For images we stretch to bounding box
  if (pattern.image) {
    // If we do not have a bounding box at this point, simply add a defer
    // key and pick this up in the fillSetter handler, where the bounding
    // box should exist.
    if (!bBox.width || !bBox.height) {
      pattern._width = "defer";
      pattern._height = "defer";
      return;
    }
    // Handle aspect ratio filling
    if (pattern.aspectRatio) {
      bBox.aspectRatio = bBox.width / bBox.height;
      if (pattern.aspectRatio > bBox.aspectRatio) {
        // Height of bBox will determine width
        bBox.aspectWidth = bBox.height * pattern.aspectRatio;
      } else {
        // Width of bBox will determine height
        bBox.aspectHeight = bBox.width / pattern.aspectRatio;
      }
    }
    // We set the width/height on internal properties to differentiate
    // between the options set by a user and by this function.
    pattern._width = pattern.width || Math.ceil(bBox.aspectWidth || bBox.width);
    pattern._height =
      pattern.height || Math.ceil(bBox.aspectHeight || bBox.height);
  }
  // Set x/y accordingly, centering if using aspect ratio, otherwise adjusting
  // so bounding box corner is 0,0 of pattern.
  if (!pattern.width) {
    pattern._x = pattern.x || 0;
    pattern._x +=
      bBox.x -
      Math.round(
        bBox.aspectWidth ? Math.abs(bBox.aspectWidth - bBox.width) / 2 : 0
      );
  }
  if (!pattern.height) {
    pattern._y = pattern.y || 0;
    pattern._y +=
      bBox.y -
      Math.round(
        bBox.aspectHeight ? Math.abs(bBox.aspectHeight - bBox.height) / 2 : 0
      );
  }
};
/* eslint-disable no-invalid-this */
/**
 * Add a pattern to the renderer.
 *
 * @private
 * @function Highcharts.SVGRenderer#addPattern
 *
 * @param {Highcharts.PatternObject} options
 * The pattern options.
 *
 * @param {boolean|Highcharts.AnimationOptionsObject} [animation]
 * The animation options.
 *
 * @return {Highcharts.SVGElement|undefined}
 * The added pattern. Undefined if the pattern already exists.
 *
 * @requires modules/pattern-fill
 */
H.SVGRenderer.prototype.addPattern = function (options, animation) {
  var pattern,
    animate = pick(animation, true),
    animationOptions = animObject(animate),
    path,
    defaultSize = 32,
    width = options.width || options._width || defaultSize,
    height = options.height || options._height || defaultSize,
    color = options.color || "#343434",
    id = options.id,
    ren = this,
    rect = function (fill) {
      ren.rect(0, 0, width, height).attr({ fill: fill }).add(pattern);
    },
    attribs;
  if (!id) {
    this.idCounter = this.idCounter || 0;
    id = "highcharts-pattern-" + this.idCounter + "-" + (this.chartIndex || 0);
    ++this.idCounter;
  }
  // Do nothing if ID already exists
  this.defIds = this.defIds || [];
  if (this.defIds.indexOf(id) > -1) {
    return;
  }
  // Store ID in list to avoid duplicates
  this.defIds.push(id);
  // Create pattern element
  pattern = this.createElement("pattern")
    .attr({
      id: id,
      patternUnits: "userSpaceOnUse",
      patternContentUnits: options.patternContentUnits || "userSpaceOnUse",
      width: width,
      height: height,
      x: options._x || options.x || 0,
      y: options._y || options.y || 0,
    })
    .add(this.defs);
  // Set id on the SVGRenderer object
  pattern.id = id;
  // Use an SVG path for the pattern
  if (options.path) {
    path = options.path;
    // The background
    if (options.backgroundColor) {
      rect(options.backgroundColor);
    }
    // The pattern
    attribs = {
      d: path.d || path,
    };
    if (!this.styledMode) {
      attribs.stroke = path.stroke || color;
      attribs["stroke-width"] = pick(path.strokeWidth, 2);
      attribs.fill = path.fill || "none";
    }
    if (path.transform) {
      attribs.transform = path.transform;
    }
    this.createElement("path").attr(attribs).add(pattern);
    pattern.color = color;
    // Image pattern
  } else if (options.image) {
    if (animate) {
      this.image(options.image, 0, 0, width, height, function () {
        // Onload
        this.animate(
          {
            opacity: pick(options.opacity, 1),
          },
          animationOptions
        );
        H.removeEvent(this.element, "load");
      })
        .attr({ opacity: 0 })
        .add(pattern);
    } else {
      this.image(options.image, 0, 0, width, height).add(pattern);
    }
  }
  // For non-animated patterns, set opacity now
  if (!(options.image && animate) && typeof options.opacity !== "undefined") {
    [].forEach.call(pattern.element.childNodes, function (child) {
      child.setAttribute("opacity", options.opacity);
    });
  }
  // Store for future reference
  this.patternElements = this.patternElements || {};
  this.patternElements[id] = pattern;
  return pattern;
};
// Make sure we have a series color
wrap(H.Series.prototype, "getColor", function (proceed) {
  var oldColor = this.options.color;
  // Temporarely remove color options to get defaults
  if (oldColor && oldColor.pattern && !oldColor.pattern.color) {
    delete this.options.color;
    // Get default
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    // Replace with old, but add default color
    oldColor.pattern.color = this.color;
    this.color = this.options.color = oldColor;
  } else {
    // We have a color, no need to do anything special
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  }
});
// Calculate pattern dimensions on points that have their own pattern.
addEvent(H.Series, "render", function () {
  var isResizing = this.chart.isResizing;
  if (this.isDirtyData || isResizing || !this.chart.hasRendered) {
    (this.points || []).forEach(function (point) {
      var colorOptions = point.options && point.options.color;
      if (colorOptions && colorOptions.pattern) {
        // For most points we want to recalculate the dimensions on
        // render, where we have the shape args and bbox. But if we
        // are resizing and don't have the shape args, defer it, since
        // the bounding box is still not resized.
        if (
          isResizing &&
          !(point.shapeArgs && point.shapeArgs.width && point.shapeArgs.height)
        ) {
          colorOptions.pattern._width = "defer";
          colorOptions.pattern._height = "defer";
        } else {
          point.calculatePatternDimensions(colorOptions.pattern);
        }
      }
    });
  }
});
// Merge series color options to points
addEvent(H.Point, "afterInit", function () {
  var point = this,
    colorOptions = point.options.color;
  // Only do this if we have defined a specific color on this point. Otherwise
  // we will end up trying to re-add the series color for each point.
  if (colorOptions && colorOptions.pattern) {
    // Move path definition to object, allows for merge with series path
    // definition
    if (typeof colorOptions.pattern.path === "string") {
      colorOptions.pattern.path = {
        d: colorOptions.pattern.path,
      };
    }
    // Merge with series options
    point.color = point.options.color = merge(
      point.series.options.color,
      colorOptions
    );
  }
});
// Add functionality to SVG renderer to handle patterns as complex colors
H.addEvent(H.SVGRenderer, "complexColor", function (args) {
  var color = args.args[0],
    prop = args.args[1],
    element = args.args[2],
    chartIndex = this.chartIndex || 0;
  var pattern = color.pattern,
    value = "#343434";
  // Handle patternIndex
  if (typeof color.patternIndex !== "undefined" && H.patterns) {
    pattern = H.patterns[color.patternIndex];
  }
  // Skip and call default if there is no pattern
  if (!pattern) {
    return true;
  }
  // We have a pattern.
  if (
    pattern.image ||
    typeof pattern.path === "string" ||
    (pattern.path && pattern.path.d)
  ) {
    // Real pattern. Add it and set the color value to be a reference.
    // Force Hash-based IDs for legend items, as they are drawn before
    // point render, meaning they are drawn before autocalculated image
    // width/heights. We don't want them to highjack the width/height for
    // this ID if it is defined by users.
    var forceHashId =
      element.parentNode && element.parentNode.getAttribute("class");
    forceHashId = forceHashId && forceHashId.indexOf("highcharts-legend") > -1;
    // If we don't have a width/height yet, handle it. Try faking a point
    // and running the algorithm again.
    if (pattern._width === "defer" || pattern._height === "defer") {
      H.Point.prototype.calculatePatternDimensions.call(
        { graphic: { element: element } },
        pattern
      );
    }
    // If we don't have an explicit ID, compute a hash from the
    // definition and use that as the ID. This ensures that points with
    // the same pattern definition reuse existing pattern elements by
    // default. We combine two hashes, the second with an additional
    // preSeed algorithm, to minimize collision probability.
    if (forceHashId || !pattern.id) {
      // Make a copy so we don't accidentally edit options when setting ID
      pattern = merge({}, pattern);
      pattern.id =
        "highcharts-pattern-" +
        chartIndex +
        "-" +
        hashFromObject(pattern) +
        hashFromObject(pattern, true);
    }
    // Add it. This function does nothing if an element with this ID
    // already exists.
    this.addPattern(
      pattern,
      !this.forExport &&
        pick(pattern.animation, this.globalAnimation, { duration: 100 })
    );
    value = "url(" + this.url + "#" + pattern.id + ")";
  } else {
    // Not a full pattern definition, just add color
    value = pattern.color || value;
  }
  // Set the fill/stroke prop on the element
  element.setAttribute(prop, value);
  // Allow the color to be concatenated into tooltips formatters etc.
  color.toString = function () {
    return value;
  };
  // Skip default handler
  return false;
});
// When animation is used, we have to recalculate pattern dimensions after
// resize, as the bounding boxes are not available until then.
H.addEvent(H.Chart, "endResize", function () {
  if (
    ((this.renderer && this.renderer.defIds) || []).filter(function (id) {
      return id && id.indexOf && id.indexOf("highcharts-pattern-") === 0;
    }).length
  ) {
    // We have non-default patterns to fix. Find them by looping through
    // all points.
    this.series.forEach(function (series) {
      series.points.forEach(function (point) {
        var colorOptions = point.options && point.options.color;
        if (colorOptions && colorOptions.pattern) {
          colorOptions.pattern._width = "defer";
          colorOptions.pattern._height = "defer";
        }
      });
    });
    // Redraw without animation
    this.redraw(false);
  }
});
// Add a garbage collector to delete old patterns with autogenerated hashes that
// are no longer being referenced.
H.addEvent(H.Chart, "redraw", function () {
  var usedIds = [],
    renderer = this.renderer,
    // Get the autocomputed patterns - these are the ones we might delete
    patterns = (renderer.defIds || []).filter(function (pattern) {
      return pattern.indexOf && pattern.indexOf("highcharts-pattern-") === 0;
    });
  if (patterns.length) {
    // Look through the DOM for usage of the patterns. This can be points,
    // series, tooltips etc.
    [].forEach.call(
      this.renderTo.querySelectorAll(
        '[color^="url("], [fill^="url("], [stroke^="url("]'
      ),
      function (node) {
        var id =
          node.getAttribute("fill") ||
          node.getAttribute("color") ||
          node.getAttribute("stroke");
        if (id) {
          usedIds.push(id.substring(id.indexOf("url(") + 5).replace(")", ""));
        }
      }
    );
    // Loop through the patterns that exist and see if they are used
    patterns.forEach(function (id) {
      if (usedIds.indexOf(id) === -1) {
        // Remove id from used id list
        erase(renderer.defIds, id);
        // Remove pattern element
        if (renderer.patternElements[id]) {
          renderer.patternElements[id].destroy();
          delete renderer.patternElements[id];
        }
      }
    });
  }
});
